<template>
    <div class="membercenter">
        <img src="/images/形状 3png.png" alt="" style="margin-left: 22px;margin-top: 11px;" v-if="isfanhui" @click="fanhui">
        <div class="Ismember-ce" v-if="!Ismemebr">
            <div class="Ismember-ce-head">
                <img style="width:415px;" src="/images/大标题.png"/>
            </div>
            <div class="Ismember-ce-con">
                <ul class="IsmemberList">
                    <li v-for="(item,index) in memberprice" :key="index" @click="Seletd(index)" >
                        <div class="ImagesList" :class="memberpriceIndex == index?'ImagesListhover':''">
                            <div class="before">
                                <img :src="item.Imgurl"/>
                            </div>
                            <div class="after">
                                 <img :src="item.Imgurls"/>
                            </div> 
                        </div>
                        
                    </li>
                </ul>
                <div class="Theprice">
                    <ul>
                        <li v-for="(item,index) in ThepriceList" :key="index" @click="chooseMemeber(index,item)">
                            <label class="Theprice-img" v-if="member_names == '畅聊会员'">
                                <img src="/images/组 12@2x.png" alt="">
                               
                            </label>
                            <label class="Theprice-img" v-else-if="member_names == '白金会员'">
                                <img src="/images/组 12@2x (1).png" alt="">
                               
                            </label>
                            <label class="Theprice-img" v-else-if="member_names == '钻石会员'">
                                <img src="/images/砖石会员.png" alt="">
                               
                            </label>
                            <label>
                                <span>{{item.member_name}}</span>
                            </label>
                            <label class="Theprice-price">
                                <span>¥{{item.discount_amout}}</span>
                                <span>¥{{item.amount}}</span>
                            </label>
                            <label class="Confirm" >
                                <img src="/images/确认.png" alt="" v-if="chooseMemeberIndex == index">
                            </label>
                        </li>
                    </ul>
                    <label @click="toBuymember">
                        <span>立即开通</span>
                    </label>
                </div>
            </div>
        </div>
        <div class="Ismember-ce" v-else> 
            <div class="Memebr-info">
                <ul>
                    <li>
                        <img :src="member_card" style="position: absolute;top: 18px;width:181px;"/>
                    </li>
                    <li>
                        <div class="member-data">
                            <span>{{memberinfo.member_level == 1?"畅聊会员":memberinfo.member_level == 2?'铂金会员':'钻石会员'}}</span>
                            <span style="color:#fff;margin-top:15px;">{{memberinfo.end_time}}到期</span>
                        </div>
                    </li>
                    <li>
                        <div class="member-show">
                            <span @click="xufei">立即续费</span>
                            <span @click="xufei">更换套餐</span>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="Ismember-ce-content">
                <div class="Ismember-ce-content-title">我的会员权限</div>
                <ul class="Ismember-ce-content-icon-list">
                    <li v-for="(item,index) in Membershipprivileges" :key="index">
                        <img  :src="item"/>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name:'membercenter',
    data(){
        return{
            Ismemebr:true,
            isfanhui:false,
            userinfo:JSON.parse(localStorage.getItem('userinfo')),
            memberprice:[
               {
                    Imgurl:'/images/畅聊会员 拷贝 3@2x.png',
                    Imgurls:'/images/畅聊会员-选中 拷贝@2x.png'
                },
                {
                    Imgurl:'/images/白金会员 拷贝@2x.png',
                    Imgurls:'/images/白金会员-选中 拷贝@2x.png'
                },
                {
                    Imgurl:'/images/钻石会员 拷贝@2x.png',
                    Imgurls:'/images/钻石会员-选中 拷贝@2x.png'
                }
            ],
            memberpriceIndex:0,
            Membershipprivileges:[
               '/images/meicon1.png',
               '/images/meicon2.png',
               '/images/meicon3.png',
               '/images/meicon4.png',
               '/images/meicon5.png',
               '/images/meicon6.png',
               '/images/meicon7.png',
               '/images/meicon8.png'
            ],
            ThepriceList:[],
            chooseMemeberIndex:1,
            member_names:'',
            jine:0,
            member_card:'',
            memberinfo:{},
        }
    },
    mounted(){
        this.getListMemebr()
        this.Ismemebr = this.userinfo.is_member
        //1普通会员 2白金会员 3钻石会员
        this.member_level =  this.userinfo.member_level
        this.member_card = "/images/member" + this.member_level + ".png"
        this.getmemberinfo()
    },
    methods:{
        fanhui(){
            this.Ismemebr = !this.Ismemebr
            this.isfanhui = false
        },
        xufei(){
            console.log('aaa')
            this.Ismemebr = !this.Ismemebr
            this.isfanhui = true
        },
        getmemberinfo(){
            let data = {
                user_id:this.userinfo.user_id
            }
            this.$axios({
                method:'get',
                url:'http://101.37.66.151:8768/eg-api/user/userMember/query',
                params:data,
            }).then((res) =>{
                console.log(res.data.data[0])
                this.memberinfo = res.data.data[0]
            }).catch((error) =>{
                console.log(error)
            })
        },
        toBuymember(){
            let data = {
                user_id:this.userinfo.user_id,
                rcharge_type:'account',
                amount:this.jine,//充值金额
                source:'pc',
            }
            this.$axios({
                method:'POST',
                url:'http://101.37.66.151:8768/eg-api/user/pay/aliPay',
                data:data,
            }).then((res) =>{
                var data = res.data.data
                document.querySelector('body').innerHTML = res.data.data;
                const div = document.createElement('div') // 创建div
                div.innerHTML = res.data.data // 将返回的form 放入div
                document.body.appendChild(div)
                console.log(document.forms)
                // window.open(document.forms[0], '_blank');
                // document.forms[0].submit()
            }).catch((error) =>{
                console.log(error)
            })
        },
        Seletd(e){
            this.memberpriceIndex = e
            this.getListMemebr()
        },
        chooseMemeber(e,item){
            this.chooseMemeberIndex = e
            this.jine = item.discount_amout
        },
        getListMemebr(){//获取会员列表
            var data ={
                platform:'android'
            }
            this.$axios({
                method:'get',
                url:'http://101.37.66.151:8768/eg-api/user/userMemberLevel/query',
                params:data,
            }).then((response) =>{
                if(this.memberpriceIndex == 0){
                    this.ThepriceList = response.data.data[0].cardEntityList
                    this.member_names = response.data.data[0].member_name

                }else if(this.memberpriceIndex == 1){
                    this.ThepriceList = response.data.data[1].cardEntityList
                    this.member_names = response.data.data[1].member_name
                }else{
                    this.ThepriceList = response.data.data[2].cardEntityList
                    this.member_names = response.data.data[2].member_name
                }
                
            }).catch((error) =>{
                console.log(error)
            })
        }
    }
}
</script>
<style lang="less" scoped>
    .membercenter{
        width: 90%;
        background: #ffffff;
        border-radius: 20px;
        height: auto;
        padding-top: 11px;
    }
    /*标题样式*/
    .Ismember-ce-head{
        position: relative;
        width: 100%;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .Ismember-ce{
        position: relative;
        width: 100%;
    }
    /*内容样式*/
    .Ismember-ce-con{
        position: relative;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }
    .Ismember-ce-con>ul{
        position: relative;
        width: 94%;
        margin: 0 auto;
        display: flex;
        list-style: none;
        height: auto;
        padding: 0;
        justify-content: space-around;
        margin-bottom: 30px;
        cursor: pointer;
        li{
            width: 30%;
            height: 100%;
            justify-content: space-around;
            margin: 40px auto;
            color: #5180B0;            
        }
    }
    .ImagesList{
        position: relative;
        width: 100%;
        min-height: 500px;
        display: flex;
        transition: all 0.5s linear;
        transform-style: preserve-3d;
        transition: all 0.5s linear;
        transform-style: preserve-3d;
        border-radius: 20px;
        img{
            width: 100%;
        }
    }
    .before,.after{
        width: 100%;
        border-radius: 20px;
        position: absolute;
        top: 0;
        left: 0;
    }
    .after{
        background: lightblue;
        transform: rotateY(-180deg);
    }
    .ImagesListhover{
        transform: rotateY(180deg);
    }

    .Ismember-ce-con-li{
        width: 100%;
        height: 60px;
        text-align: center;
        span{
            display: block;
            margin-top: 10px;
            width: 65%;
            margin: 0 auto;
        }
    }
    .Ismember-ce-con>ul>li:first-child{
        color: #47CECF;
    }
    .Ismember-ce-immediately1,.Ismember-ce-immediately2,.Ismember-ce-immediately3{
        position: relative;
        width:80%;
        height:40px;  
        border-radius:15px;
        text-align: center;
        margin: 0 auto;
        line-height: 40px;
       
        cursor: pointer;
    }
    .Ismember-ce-immediately1{
        border:1px solid rgba(71,206,207,1);
    }
    .Ismember-ce-immediately2{
        border:1px solid rgba(81,128,176,1);
    }
    .Ismember-ce-immediately3{
        border:1px solid rgba(255,115,54,1);
    }
    .Theprice{
        position: relative;
        width: 80%;
        margin: 0 auto;
        margin-top: 40px;
        padding-bottom: 100px;
    }
    .Theprice>ul{
        width: 100%;
        display: flex;
        list-style: none;
        justify-content: space-between;
        padding: 0;
        li{
            width: 30%;
            height: 140px;
            border: 1px solid #000;
            display: flex;
            flex-wrap: wrap;
            cursor: pointer;
        }
    }
    .Theprice>ul>li>label{
        width: 100%;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        span{
            font-size: 24px;
            color: #303030;
            font-family: FZCQJW--GB1-0;
            font-weight: bold;
        }
        
    }
    .Theprice-price{
        span{
            width: 30%;
            text-align: center;
            &:first-child{
                color: #F74444;
                font-size: 29px;
                font-weight: bold;
                font-family: MicrosoftYaHeiLight;
            }
            &:last-child{
                width: 10%;
                color: #D7D7D7;
                font-size: 20px;
                text-decoration:line-through;
                font-weight: normal;
            }
        }
    }
    .Theprice>label{
        display: flex;
        width: 100%;
        height: 40px;
        align-items: center;
        justify-content: center;
        margin-top: 130px;
        span{
            width: 30%;
            height: 40px;
            background:linear-gradient(0deg,rgba(255,77,77,1),rgba(222,39,39,1));
            border-radius:21px;
            line-height: 40px;
            color: #FFFFFF;
            font-size: 16px;
            cursor: pointer;
            text-align: center;
        }
    }
    .Theprice-img{
        width: 50%;
        display: flex;
        align-items: flex-start!important;
        justify-content: flex-start!important;
        height: auto!important;
        img{
            width: 40%;
            text-align: left;
            float: left;
        }
    }
    .Confirm{
        width: 50%;
        display: flex;
        align-items: flex-end!important;
        justify-content: flex-end!important;
        height: 40px!important;
        img{
            width: 10%;
            text-align: left;
            float: left;
        }
    }
    .recommended{
        width: 56%;
        color: #FA4848!important;
        font-size: 14px!important;
        text-align: right!important;
        padding-top:10px;
    }
    /*会员信息详情*/
    .Memebr-info{
        position: relative;
        width: 90%;
        height: 20%;
        margin: 0 auto;
        background-image: url('/images/会员底图 拷贝.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        top: 4.65%;
    }
    .Memebr-info>ul{
        color: black;
        list-style: none;
        display: flex;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
        padding: 0;
        li{ 
            width: 33%;
            height: 100%;
            align-items: center;
            text-align: left;
        }
    }
    .Memebr-info>ul>li:first-child{
        margin-left: 4%;
        margin-top: 20%;
    }
    .member-data{
        span{
            display: block;
        }
    }
    .member-data>span:first-child{
        font-size: 18px;
        color: #FFFFFF;
        font-weight: bold;
    }
    .member-show{
        position: relative;
        text-align: center;
        margin-top: -23px;
        span{
            display: block;
            width:90%;
            height:40px;
            margin-top: 40px;
            line-height: 40px;
            color: #FFFFFF;
            font-size: 16px;
            border:1px solid rgba(255,255,255,1);
            border-radius:15px;
            cursor: pointer;
        }
    }
    .member-show>span:first-child{
        background: #FFFFFF;
        color: #000;
    }
    /*会员内容我的会员权限样式*/
    .Ismember-ce-content{
        position: relative;
        width: 90%;
        margin: 0 auto;
        height: 400px;
    }
    .Ismember-ce-content-title{
        position: relative;
        width: 100%;
        // height: 40px;
        margin-top: 10%;
        color: #2DC7C8;
        font-weight: bold;
        font-size: 22px;
        padding-left: 1%;
        border-left: 10px solid #2DC7C8;
    }
    .Ismember-ce-content-icon-list{
        display: flex;
        list-style: none;
        flex-wrap: wrap;
        width: 100%;
        padding: 0;
        li{
            width: 22%;
            margin-left: 3%;
            margin-top: 30px;
            cursor: pointer;
            img{
                width: 100%;
            }
        }
    }
</style>